Layout Master Tutorial

1. Introduction

Working with HTML and CSS to create web page layouts can be tricky, and time consuming. First, you may have to acquire new HTML and or CSS knowledge and skills, and this can be daunting. Even then, experienced developers find that hand coding the visual layout of a page can be frustrating. Recently, a number of WYSIWYG web development applications have included this kind of editing as part of a broad range of HTML and DHTML functionality. Layout Master on the other hand is designed solely to help you create HTML + CSS page layouts. We feel that the application complements other, more feature packed editors, such as Adobe GoLive and MacroMedia DreamWeaver. We've even worked hard to ensure maximum compatibility with the code those applications produce. The application is also designed to work well with your text or HTML editors of choice.

About the tutorial

This tutorial is designed to take you through most of the features of Layout Master while developing a sophisticated page layout. The page will incorporate graphics and text and be laid out using Layout Master.

Creating the House of Style

You've probably come across the House of Style at some point. It's our site dedicated to all things related to style sheets. It's been around for quite some time now, and has had a couple of different appearances. It's the earliest look of the House of Style main page we'll reproduce here.

figure 1: the finished web site in a browser

What will we do?

In this tutorial we will begin by creating a new layout. We'll give it some basic properties. Then we will design the layout by adding positioned elements to it. Along the way, we'll learn about the different Layout Master editors for working with these elements, and their properties. By the end, we will have covered most of the major functionality of the application, and many of the core ideas of working with CSS and HTML to create page layouts.

So, let's begin.

next: setting document properties